<template>
    <div>
      <div ref="chartRef" style="width: 800px; height:350px"></div>
    </div>
  </template>
  <script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
export default defineComponent({
  props: {
    rowdata: {
      type: Array as PropType<Array>,
      default: [],  // 设置默认值
    },
    title: {
      type: String as PropType<string>,
      default: [],  // 设置默认值
    },
    title1: {
      type: String as PropType<string>,
      default: [],  // 设置默认值
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, resize, echarts, getInstance } = useECharts(
      chartRef as Ref<HTMLDivElement>,
    );
    onMounted(() => {
      initchart()
    })
    function getVirtualData(year) {
      const date = +echarts.time.parse(year + '-01-01');
      const end = +echarts.time.parse(year + '-12-31');
      const dayTime = 3600 * 24 * 1000;
      const data = [];
      for (let time = date; time <= end; time += dayTime) {
        data.push([
          echarts.time.format(time, '{yyyy}-{MM}-{dd}', false),
          Math.floor(Math.random() * 10000)
        ]);
      }
      return data;
    }
    function initchart() {
      setOptions({
        // 数据默认在图上显示
        label: {
          show: true,
          formatter: function (params) {
            return params.value[1];
          },
        },
        // tooltip: {
        //   trigger: 'item', // 设置为 'item' 表示默认显示数据
        //   position: 'top',
        //   show: true,
        //   formatter: function (params) {
        //     return `${params.value[0]}: ${params.value[1]}`;
        //   }
        // },
        visualMap: {
          show: false,
          min: 0,
          max: 10000
        },
        calendar: {
          range: '2017',
          cellSize: [40, 15],
          //   表格之间的线不显示
          splitLine: {
            show: false
          },
          //   年份不显示
          yearLabel: {
            show: false
          },
          //   月份不显示
          monthLabel: {
            show: false
          }
        },
        series: {
          type: 'heatmap',
          coordinateSystem: 'calendar',
          data: getVirtualData('2017')
        }
      })
    }
    return {
      chartRef,
      initchart
    }
  }
})
  </script>
  <style scoped lang=less>
.index2 {
    width: 100%;
    height: 100%;
    background: #fff;
}
</style>